@import url("rem.less");
.main {
    .container {
        .list {
            display: flex;
            .shai {
                .w(230);
                .lh(140);
                text-align: center;
                .font-dpr(13px);
                z-index: 100;
                background: linear-gradient(90deg, transparent, 5%, #fff);
            }
        }
    }
    .opts {
        .options {
            .dis;
            flex-wrap: wrap;
            .width{
                width: 100%;
            }
            dl {
                width: 50%;
                background: #fff;
                dt {
                    .margin(30,
                    30,
                    30,
                    30);
                    img {
                        width: 100%;
                    }
                }
                dd {
                    .margin(30,
                    30,
                    30,
                    30);
                    h5,
                    p {
                        width: 90%;
                        overflow: hidden;
                        word-break: keep-all;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        margin: 2% 0;
                    }
                    h5 {
                        .font-dpr(14px);
                        color: #292929;
                    }
                    p {
                        background: #f5f5f5;
                        .font-dpr(12px);
                        color: #999;
                    }
                    .opts_bottom {
                        .dis;
                        justify-content: space-between;
                        .opb_left {
                            h4 {
                                color: #D70057;
                                .font-dpr(15px);
                                span {
                                    .font-dpr(12px);
                                    .ml(30);
                                    display: inline-block;
                                    .w(100);
                                    .lh(40);
                                    text-align: center;
                                    border: 1px solid #D70057;
                                    border-radius: 5px;
                                }
                            }
                            p {
                                background: #D70057;
                                color: #fff;
                                .mt(10);
                                .w(80);
                                .lh(40);
                                text-align: center;
                            }
                        }
                        .opb_right {
                            a {
                                .w(80);
                                .h(80);
                                display:flex;
                                align-items: center;
                                justify-content: center;
                                border: 1px solid #999;
                                border-radius: 50%;
                                overflow: hidden;
                                img {width:80%;}
                            }
                        }
                    }
                }
            }
        }
    }
}
